<template>
  <canvas ref="starCanvas" class="star-canvas"></canvas>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';

const starCanvas = ref(null);
const ctx = ref(null);
const stars = ref([]);
const numStars = 300; // 减少星星数量以增加稀疏感
const maxMeteors = 2; // 最大流星数量
const meteorChance = 0.005; // 流星出现的概率

class Star {
  constructor() {
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.size = Math.random() * 1 + 0.5; // 大小在0.5到1.5之间
    this.speedX = (Math.random() - 0.5) * 0.3 + 0.1; // 随机水平速度，总体朝右
    this.speedY = (Math.random() - 0.5) * 0.3 - 0.1; // 随机垂直速度，总体朝上
    this.color = Math.random() < 0.5 ? '#ffffcc' : '#cc99ff'; // 淡黄色或淡紫色
  }

  update() {
    this.x += this.speedX;
    this.y += this.speedY;
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
      this.x = Math.random() * window.innerWidth;
      this.y = Math.random() * window.innerHeight;
    }
  }

  draw() {
    ctx.value.beginPath();
    ctx.value.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.value.fillStyle = this.color;
    ctx.value.fill();
  }
}

class Meteor {
  constructor() {
    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.size = Math.random() * 2 + 1;
    this.speed = Math.random() * 5 + 4; // 加快流星速度
    this.angle = Math.random() * Math.PI / 4; // 随机角度
    this.color = '#ffffff';
  }

  update() {
    this.x += this.speed * Math.cos(this.angle);
    this.y -= this.speed * Math.sin(this.angle);
    if (this.x > window.innerWidth || this.x < 0 || this.y > window.innerHeight || this.y < 0) {
      this.x = Math.random() * window.innerWidth;
      this.y = Math.random() * window.innerHeight;
    }
  }

  draw() {
    ctx.value.beginPath();
    ctx.value.moveTo(this.x, this.y);
    ctx.value.lineTo(this.x - 10 * Math.cos(this.angle), this.y + 10 * Math.sin(this.angle));
    ctx.value.strokeStyle = this.color;
    ctx.value.lineWidth = this.size;
    ctx.value.stroke();
  }
}

function init() {
  for (let i = 0; i < numStars; i++) {
    stars.value.push(new Star());
  }
}

function animate() {
  ctx.value.clearRect(0, 0, window.innerWidth, window.innerHeight);

  stars.value.forEach(star => {
    star.update();
    star.draw();
  });

  // 偶尔生成流星
  if (Math.random() < meteorChance && stars.value.filter(star => star instanceof Meteor).length < maxMeteors) {
    stars.value.push(new Meteor());
  }

  requestAnimationFrame(animate);
}

onMounted(() => {
  ctx.value = starCanvas.value.getContext('2d');
  starCanvas.value.width = window.innerWidth;
  starCanvas.value.height = window.innerHeight;
  init();
  animate();

  window.addEventListener('resize', () => {
    starCanvas.value.width = window.innerWidth;
    starCanvas.value.height = window.innerHeight;
    stars.value = [];
    init();
  });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', () => {
    starCanvas.value.width = window.innerWidth;
    starCanvas.value.height = window.innerHeight;
    stars.value = [];
    init();
  });
});
</script>

<style scoped>
.star-canvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: transparent;
}
</style>